<template>
  <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
    <el-menu-item index="1" disabled>
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>经销商管理</span>
      </template>
    </el-menu-item>
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/previewClient">预览客户</el-menu-item>
    <el-menu-item index="/intentionalClient">意向客户</el-menu-item>
    <el-menu-item index="/count">统计</el-menu-item>
    <el-button type="primary" class="d-flex float-right mt-2" @click="loginOut">退出登录</el-button>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/',
      quit: 'quit'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    loginOut(){
      this.$emit('quit', this.quit);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-menu-item.is-disabled{
  opacity: 1!important;
}
</style>
